<template>
  <div class="login-banners">
    <img class="mistake" @click="Out" src="./image/错误.png" alt="" />
    <p class="title">欢迎登录趣味学堂</p>
    <p>手机验证码直接登录，无需注册</p>
  </div>

  <form action="">
    <input
      class="txt"
      type="text"
      placeholder="手机号码"
      maxlength="11"
      @focus="keyboard"
      v-model="userName"
    />
    <input
      class="txt"
      type="text"
      placeholder="验证码"
      @focus="keyboard"
      maxlength="4"
      v-model="passWord"
      @input="change"
    />
    <span class="getCode" @click="getCode">获取验证码</span>
    <Button size="large" :class="btn" @click="clickHandle" round>登录</Button>
  </form>
  <img
    class="bigImg"
    src="https://lanhu.oss-cn-beijing.aliyuncs.com/psvmgy3chw4djslidqj2n5wt6mmwu8srur4e2861c5-4bde-4184-9087-089ee62a8290"
  />
  <p class="bot">
    <checkbox
      class="chk"
      v-model="checked"
      checked-color="#666666"
      icon-size="4vw"
    ></checkbox>
    同意《趣味学堂用户注册协议及隐私政策》
  </p>
</template>
<script setup>
import { Button, Checkbox, Toast } from "vant";

import { ref } from "vue";
import { getCodeAPI, LoginAPI } from "../API/li";
import { setToken } from "../utils/tools";
import { useRouter } from "vue-router";

let router = useRouter();
const checked = ref(true);

//获取验证码
let userName = ref("");
let passWord = ref("");
// let flag = ref(false);

let btn = ref("");
let getCode = () => {
  if (userName.value.length == 11) {
    Toast.loading({
      message: "加载中...",
      forbidClick: false,
      duration: 1500,
      onOpened: setTimeout(() => {
        getCodeAPI(userName.value).then((res) => {
          console.log(res);
          passWord.value = res.data;
          Toast.success("获取成功");
          btn.value = "btn";
          // flag.value = true;
        });
      }, 1500),
    });
  } else {
    Toast.fail("请输入正确的手机号");
  }
};

//验证码改变
let change = () => {
  if (passWord.value.length == 4) {
    btn.value = "btn";
  } else {
    btn.value = "";
  }
  console.log(btn.value);
};

//登录
let clickHandle = () => {
  if (userName.value && passWord.value) {
    LoginAPI(userName.value, passWord.value).then((res) => {
      console.log(res);
      if (res.code == 200) {
        setToken(res.data);
        Toast.success("登录成功");
        router.push({
          name: "Home",
        });
      } else if (res.code == 1002) {
        Toast.fail("请获取最新的验证码");
      }
    });
  } else {
    Toast.fail("手机号或者验证码不能为空");
  }
};

//退出
let Out = () => {
  router.push({
    name: "User",
  });
};
</script>
<style scoped>
.getCode {
  position: absolute;
  right: 6vw;
  margin-top: -8vw;
  color: #007af4;
  font-size: 0.6rem;
}
.btn {
  background-color: #007af4;
  color: #ffffff;
}
form {
  width: 85vw;
}
.login-banners {
  width: 100%;
  height: 100%;
  padding: 5.3333vw;
  box-sizing: border-box;
}
.title {
  font-size: 1.5rem;
  margin-top: 5.3333vw;
}
p:nth-of-type(2) {
  font-size: 0.8rem;
  margin-top: 2.6667vw;
}
.mistake {
  float: right;
}
.txt {
  width: 85vw;
  border: none;
  border-bottom: 1px solid rgba(128, 128, 128, 0.167);
  height: 15vw;
  margin-left: 7vw;
  margin-top: 5vw;
  opacity: 0.5;
}
button {
  margin-left: 7vw;
  margin-top: 10vw;
  background-color: #e6e6e6;
  height: 12vw;
  color: #999999;
}
.bigImg {
  width: 80vw;
  /* position: absolute; */
  margin-left: 10vw;
  margin-top: 15vw;
}
.bot {
  font-size: 0.6rem;
  color: #999999;
  text-align: center;
  margin-top: 10vw;
  overflow: hidden;
  height: 10vw;
  display: flex;
  justify-content: center;
  line-height: 10.5vw;
}
.chk {
  margin-right: 3px;
}
</style>
